<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/swiper-bundle.css">
    <link rel="stylesheet" href="./css/index.css">
    <script src="./js/swiper-bundle.js"></script>
    <title>慕客作业</title>
    <script>
        window.onload = function() {
            var swiper = new Swiper('.nav-box', {
                slidesPerView: 3,
                spaceBetween: 30,
                centeredSlides: true,
                loop: true,
                autoplay:true,
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true,
                },
                navigation: {
                    nextEl: ".swiper-button-next",
                    prevEl: ".swiper-button-prev",
                    },
            });
            var swiper = new Swiper(".mySwiper", {
                slidesPerView: 2.3,
                spaceBetween: 30,
                pagination: {
                el: ".swiper-pagination",
                clickable: true,
                },
                loop: true,
                autoplay:true,
            });

        }
      </script>
</head>
<body>
    <header>
        <div class="header-td">
            <div class="WeChat">
                <span class="spot"></span>
                <span class="spot"></span>
                <span class="spot"></span>
                <span class="spot"></span>
                <span class="spot"></span>
                <a href="#">WeChat</a>
                <span class="WeChat-icon">&#xe76c;</span>
            </div>
            <div class="time">
                <a href="#">1:21 &nbsp;AM</a>
            </div>
            <div class="power">
                <span class="power-icon">&#xe630;</span>
                <a href="#">100%</a>
            </div>
        </div>
        <div class="header-bd">
            <a href="#">学志项目</a>
            <div class="header-box">
                <span class="span1">&#xe608;</span>
                <span class="span2">&#xe608;</span>
                <span class="span3">&#xe608;</span>
                <span class="Vertical"></span>
                <span class="span4">&#xe603;</span>
            </div>
        </div>
    </header>
    <div class="banner">
        <div class="wrap">
            <a href="#">
                <img src="./img/组 22@2x.png" alt="">
                <span>HR面试</span>
            </a>
            <a href="#">
                <img src="./img/笔@2x.png" alt="">
                <span>笔试</span>
            </a>
            <a href="#">
                <img src="./img/组 24@2x.png" alt="">
                <span>技术面试</span>
            </a>
            <a href="#">
                <img src="./img/组 26@2x.png" alt="">
                <span>模拟面试</span>
            </a>
            <a href="#">
                <img src="./img/组 25@2x.png" alt="">
                <span>面试技巧</span>
            </a>
            <a href="#">
                <img src="./img/组 23@2x.png" alt="">
                <span>薪资查询</span>
            </a>
        </div>
        <div class="ad">
            <img src="./img/组 21@2x.png" alt="">
        </div>
    </div>
    <div class="nav-line"></div>
    <div class="nav">
        <div class="nav-hd">
            <h2>就业指导</h2>
            <a href="#">更多>></a>
        </div>
        <div class="nav-bd">
            <div class="swiper nav-box">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img src="./img/轮播图.png" alt="">
                        <span>老师教你应对面试技巧</span>
                    </div>
                    <div class="swiper-slide">
                        <img src="./img/轮播图.png" alt="">
                        <span>老师教你应对面试技巧</span>
                    </div>
                    <div class="swiper-slide">
                        <img src="./img/轮播图.png" alt="">
                        <span>老师教你应对面试技巧</span>
                    </div>
                    <div class="swiper-slide">
                        <img src="./img/轮播图.png" alt="">
                        <span>老师教你应对面试技巧</span>
                    </div>
                    <div class="swiper-slide">
                        <img src="./img/轮播图.png" alt="">
                        <span>老师教你应对面试技巧</span>
                    </div>
                </div>
            </div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
              <!-- Swiper JS -->
              <script src="../package/js/swiper.min.js"></script>
        </div>
    </div>
    <div class="nav-line"></div>
    <div class="nav2">
        <div class="nav2-hd">
            <h2>充电学习</h2>
            <a href="#">更多>></a>
        </div>
        <div class="nav2-bd">
            <div class="swiper mySwiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <div class="only-item">
                            <img src="./img/充电图.png" alt="">
                            <p>说地道英语，告别中式英语</p>
                            <a class="study">125人学习</a>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="only-item">
                            <img src="./img/充电图.png" alt="">
                            <p>说地道英语，告别中式英语</p>
                            <a class="study">125人学习</a>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="only-item">
                            <img src="./img/充电图.png" alt="">
                            <p>说地道英语，告别中式英语</p>
                            <a class="study">125人学习</a>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="only-item">
                            <img src="./img/充电图.png" alt="">
                            <p>说地道英语，告别中式英语</p>
                            <a class="study">125人学习</a>
                        </div>
                    </div>
                    
                </div>
              </div>
          
              <!-- Swiper JS -->
              <script src="../package/swiper-bundle.min.js"></script>
            <!-- <div class="nav2-box">
                <img src="./img/充电图.png" alt="">
                <span class="ad-icon">说地道英语，告别中式英语</span>
                <a href="#">156<span class="ad-icon2">人学习</span></a>
            </div>
            <div class="nav2-box">
                <img src="./img/充电图.png" alt="">
                <span class="ad-icon">说地道英语，告别中式英语</span>
                <a href="#">156<span class="ad-icon2">人学习</span></a>
            </div>
            <div class="nav2-box">
                <img src="./img/充电图.png" alt="">
                <span class="ad-icon">说地道英语，告别中式英语</span>
                <a href="#">156<span class="ad-icon2">人学习</span></a>
            </div> -->
        </div>
    </div>
    <div class="bottom">
        <a href="#">
            <span class="icon1 blue">&#xe6d3;</span>
            <span class="icon2 blue">首页</span>
        </a>
        <a href="#">
            <span class="icon1">&#xe6fb;</span>
            <span class="icon2">技术面试</span>
        </a>
        <a href="#">
            <span class="icon1">&#xe60c;</span>
            <span class="icon2">模拟面试</span>
        </a>
        <a href="#">
            <span class="icon1">&#xe600;</span>
            <span class="icon2">我的主页</span>
        </a>
    </div>
</body>
</html>